<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
  <link href="//gmpg.org/xfn/11" rel="profile">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="Hugo 0.69.0" />

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>vue项目的各个组件及，vue页面的一些语法相关 &middot; 郝朝帅的博客</title>

  
  <link type="text/css" rel="stylesheet" href="/blog/css/print.css" media="print">
  <link type="text/css" rel="stylesheet" href="/blog/css/poole.css">
  <link type="text/css" rel="stylesheet" href="/blog/css/syntax.css">
  <link type="text/css" rel="stylesheet" href="/blog/css/hyde.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|PT+Sans:400,400i,700">


  
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="/favicon.png">

  
  
</head>

  <body class="theme-base-0f ">
  <aside class="sidebar">
  <div class="container sidebar-sticky">
    <div class="sidebar-about">
      <a href="/blog/"><h1>郝朝帅的博客</h1></a>
      <p class="lead">
       我的个人博客 
      </p>
    </div>

    <nav>
      <ul class="sidebar-nav">
        <li><a href="/blog/">Home</a> </li>
        
      </ul>
    </nav>

    <p>&copy; 2020. All rights reserved. </p>
  </div>
</aside>

    <main class="content container">
    <div class="post">
  <h1>vue项目的各个组件及，vue页面的一些语法相关</h1>
  <time datetime=2020-04-22T20:04:59&#43;0800 class="post-date">Wed, Apr 22, 2020</time>
  <h4 id="vue项目的各个组件及vue页面的一些语法相关">vue项目的各个组件及，vue页面的一些语法相关</h4>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python">vue <span style="color:#960050;background-color:#1e0010">各个组件的作用</span>:<span style="color:#75715e"># vue的整体结构为扁平结构</span>
    

build	<span style="color:#75715e"># 里面是打包的配置文件</span>
config	<span style="color:#75715e"># 运行的配置文件，包含有:</span>
    dev<span style="color:#f92672">.</span>env<span style="color:#f92672">.</span>js	<span style="color:#75715e">#是开发环境</span>
    index<span style="color:#f92672">.</span>js	<span style="color:#75715e">#是正式环境，</span>
    prod<span style="color:#f92672">.</span>env<span style="color:#f92672">.</span>js	<span style="color:#75715e">#是灰度环境</span>
dist	<span style="color:#75715e">#打包后的静态文件，再vue还没有打包的时候这个文件是不存在的</span>
node_modudles	<span style="color:#75715e">#里是各种vue需要的依赖， </span>
<span style="color:#e6db74">&#39;&#39;&#39;
</span><span style="color:#e6db74">node_modules依赖于package.json去安装，逐行的扫描里面的dependencies，扫描到一个就安装一个(最好是设置国内源再去下载，设置方法：npm set registry &lt;a href=&#34;https://registry.npm.taobao.org&#34;&gt;https://registry.npm.taobao.org&lt;/a&gt;     这是个淘宝源还有别的源，比如清华源也可以设置， 查看当前机器是什么源可以   npm config list  进行查看
</span><span style="color:#e6db74">&#39;&#39;&#39;</span>
src		<span style="color:#75715e"># 是所有的代码，vue展示的代码和路由都在这里</span>
static	<span style="color:#75715e"># 是静态文件夹，静态文件都放在这里</span>
<span style="color:#f92672">.</span>gitignore	<span style="color:#75715e"># 放在里面的文件名是不会被上传到git的</span>
	npm<span style="color:#f92672">-</span>debug<span style="color:#f92672">-</span>log	<span style="color:#75715e"># 报错的一些日志</span>
   yarn<span style="color:#f92672">-</span>debug<span style="color:#f92672">-</span>log	<span style="color:#75715e"># vue的一些组件可以用npm装，也可以用yarn来装</span>
</code></pre></div><h4 id="vue-中src目录里的文件作用">vue 中src目录里的文件作用：</h4>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python">assets	<span style="color:#75715e"># 放一些项目用到的样式和文件</span>
	bootstrap	 <span style="color:#75715e"># 响应式设计</span>
   images		<span style="color:#75715e"># 用到的图片</span>
components	<span style="color:#75715e"># 页面组件文件夹，写好的页面都会放在这个文件夹里</span>
router	<span style="color:#75715e"># 存放着写好页面的路由</span>
	index<span style="color:#f92672">.</span>js	<span style="color:#75715e"># 配置页面路由的文件</span>
    <span style="color:#ae81ff">1</span>)<span style="color:#f92672">.</span>path	<span style="color:#75715e"># 是url，用来访问的路径</span>
    <span style="color:#ae81ff">2</span>)<span style="color:#f92672">.</span>name	<span style="color:#75715e"># 是命名空间也用来访问具体的页面</span>
    <span style="color:#ae81ff">3</span>)<span style="color:#f92672">.</span>component	<span style="color:#75715e"># 是组件名称</span>
    export default new Router({
        routers:routers,
       <span style="color:#ae81ff">4</span>)<span style="color:#f92672">.</span> mode	<span style="color:#75715e">#定义了模式，一般会用到一个history为了去掉路由里的#号,可以提高用户的体验</span>
    })
    
app<span style="color:#f92672">.</span>vue	<span style="color:#75715e">#- 是主模块，绑定vue和页面节点用。所有渲染都在这个页面显示&lt;/li&gt;</span>
config<span style="color:#f92672">.</span>js	<span style="color:#75715e">#自己定义的，将一些常用的方法或者变量写在一个自己建立的文件中来提高复用性</span>
main<span style="color:#f92672">.</span>js	<span style="color:#75715e"># 入口文件，所有的vue实例生成和一部分组件都在这里面。在这里导入的组件可以全局使用，提高复用性 </span>
    <span style="color:#ae81ff">1</span>)<span style="color:#f92672">.</span> axios	<span style="color:#75715e">#在main中导入主要就是为了提高复用性</span>
    <span style="color:#ae81ff">2</span>)<span style="color:#f92672">.</span> Axios<span style="color:#f92672">.</span>defaults<span style="color:#f92672">.</span>withCredentials	<span style="color:#75715e">#使我们发送的请求带着cookie，副作用就是cookie会限 制大小。会影响我们的性能  </span>
    <span style="color:#ae81ff">3</span>)<span style="color:#f92672">.</span> QS	<span style="color:#75715e">#一个json模块，反序列化时使用</span>
    <span style="color:#ae81ff">4</span>)<span style="color:#f92672">.</span> HeyUI	<span style="color:#75715e">#一个美化模块 	</span>
<span style="color:#960050;background-color:#1e0010">将模块导入完成后即可生成</span>vue实例(<span style="color:#960050;background-color:#1e0010">注意自己导入美化模块是否需要进行适配</span>)
</code></pre></div><h4 id="vue页面的结构">vue页面的结构</h4>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue">&lt;<span style="color:#f92672">template</span>&gt;<span style="color:#a6e22e">模板</span>
	<span style="color:#a6e22e">模板里必须用容器div包一下才能写其他标签</span>
	&lt;<span style="color:#f92672">div</span>&gt;
        <span style="color:#a6e22e">其他标签</span>
    &lt;/<span style="color:#f92672">div</span>&gt;
&lt;/<span style="color:#f92672">template</span>&gt;

&lt;<span style="color:#f92672">script</span>&gt;<span style="color:#a6e22e">页面的行为</span>
	<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span>{
        <span style="color:#75715e">// 定义数据
</span><span style="color:#75715e"></span>        <span style="color:#a6e22e">data</span>(){
            <span style="color:#66d9ef">return</span>{
                <span style="color:#a6e22e">msg</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;这是一个变量&#39;</span>
            }
        },
        <span style="color:#75715e">//钩子方法
</span><span style="color:#75715e"></span>        <span style="color:#a6e22e">mounted</span><span style="color:#f92672">:</span><span style="color:#66d9ef">function</span>(){
            
        },
        <span style="color:#75715e">//自定义方法
</span><span style="color:#75715e"></span>        <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span>{
            
        }
    }
&lt;/<span style="color:#f92672">script</span>&gt;
&lt;<span style="color:#f92672">style</span>&gt;<span style="color:#75715e">//页面的逻辑
</span><span style="color:#75715e"></span>
&lt;/<span style="color:#f92672">style</span>&gt;

</code></pre></div><h3 id="vue页面的一些标签">vue页面的一些标签</h3>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-html" data-lang="html">v-html 	--用来展示变量,还可以解析数据中的html标签
{ { } } --也是用来显示变量，但是不能展示标签功能,
v-show	--隐藏或者展示，通过给予的布尔值来决定
v-if 	-- 判断。根据条件执行相关操作
v-else-if	-- 一般用在v-if下面进行其他判断
v-else	-- 一般用在v-if下面，在v-if不成立时执行
v-for	-- 循环遍历。一般将数据进行遍历展示
v-bind	-- 单向绑定,可以通过语法糖来代替{ 语法糖可以减少代码量，是最常使用的 }
	当我们在标签里使用表达式的时候一定要用花括弧将他们包裹起来, class在这里是类选择器，用于style中样式的绑定
v-model	-- 双向绑定，限制使用在input, select, textara, components中，可以进行动态修改数据
vue中methods里如何进行遍历操作
先声明一个标识位i=0,从0开始。再写入一个结束位 l=this.flist.length， 注意这个地方的length是一个属性， 是没有括号的。然后写入条件 i+l ，然后写行为 i+

</code></pre></div><h1 id="pip配置">pip配置</h1>
<p>在该用户目录下新建一个pip文件夹</p>
<p>创建一个pip.ini源文件</p>
<pre><code>[global]

trusted-host = mirrors.aliyun.com

index-url = http://mirrors.aliyun.com/pypi/simple
</code></pre><hr>
<p>pip安装依赖</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python"><span style="color:#75715e"># 单条依赖</span>
pip install Django<span style="color:#f92672">==</span><span style="color:#ae81ff">2.0</span><span style="color:#f92672">.</span><span style="color:#ae81ff">4</span>
<span style="color:#75715e"># 安装多条</span>
pip install <span style="color:#f92672">-</span>r <span style="color:#960050;background-color:#1e0010">依赖目录文件</span>
</code></pre></div>
</div>


    </main>

    
  </body>
</html>
